<template>
  <div class="mui-pages" style="background-color: #fff">
    <header class="mui-bar mui-bar-nav flex-justify-start">
      <span @click="fn.back()" class="mui-action-back"
        ><img class="back-btn" src="../../../../static/images/back.png"
      /></span>
      <h1 class="mui-title">全狱支部</h1>
    </header>
    <div class="message-tab people-header">
      <div class="header-search all-search">
        <input
          type="search"
          v-model="keyword"
          placeholder="请输入支部名称搜索"
        />
        <i class="people-search" @click="search"></i>
      </div>
    </div>
    <!-- --------其他支部---------------start -->
    <div
      id="other"
      class="mui-active mui-scroll-wrapper"
      style="padding-top: 90px"
    >
      <div
        class="organization-lists mui-scroll-wrapper"
        style="padding-top: 50px"
      >
        <cube-scroll ref="scroll" :options="options" @pulling-up="onPullingUp">
          <cube-swipe>
            <transition-group name="swipe" tag="div">
              <div v-for="(data, index) in otherData" :key="index">
                <div
                  class="mui-table-view-cell list-item"
                  @click="detail(index)"
                >
                  <li class="mui-navigate-right" v-html="data.name"></li>
                </div>
              </div>
            </transition-group>
          </cube-swipe>
          <!-- <div class="text-center no-data" v-if="otherData.length === 0">
            <img src="../../../../static/images/no_data.png" alt="" />
            <p>暂无数据</p>
          </div> -->
          <!-- W noData -->
          <noData v-if="otherData.length === 0"></noData>
          <onBottom v-else-if="onBottom"></onBottom>
        </cube-scroll>
      </div>
    </div>
    <!-- --------其他支部---------------end -->
  </div>
</template>

<script>
import footerbar from "../common/footerbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import keyword from "./keyword";
export default {
  components: {
    footerbar,
  },
  name: "",
  data() {
    return {
      fn: tools,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      objectsName: "",
      otherData: [],
      backData: [],
      infinite: true,
      keyword: "",
      pageIndex: 0,
      pageSize: 10,
    };
  },
  created() {
    this.loadData();
  },
  watch: {
    keyword(newValue, oldValue) {
      this.search();
    },
  },
  methods: {
    // 是否可以添加修改
    canEdit() {
      let roleType = this.$store.state.roleType || "";
      return tools.hasRoleType(roleType);
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    loadData() {
      let data = {
        dataScope: "6",
        name: this.keyword,
        parentId: "",
      };
      loginService.getPartyGroups(data).then((res) => {
        if (res.code !== 200) {
          this.$refs.scroll.forceUpdate(true, false);
          return tools.tip(
            res.describe === "未查询到资源" ? "已无更多数据" : res.describe
          );
        }
        let searchReg = new RegExp(`${this.keyword}`, "g");
        let searchReplace = `<span class="text-red">${this.keyword}</span>`;
        // 备份结果集，方便后面详情传值
        this.backData = JSON.parse(JSON.stringify(res.data));
        res.data.forEach((v, i) => {
          // 标红字体
          if (this.keyword.length > 0) {
            v.name = v.name.replace(searchReg, searchReplace);
          }
        });
        this.otherData = res.data;
        setTimeout(() => {
          this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = true;
        }, 100);
      });
    },
    search() {
      this.otherData = [];
      this.pageIndex = 0;
      this.loadData();
    },
    detail(index) {
      let data = this.backData[index];
      this.$router.push({ path: `/otherBranchDetail/${data.id}/${data.name}` });
    },
  },
};
</script>

<style scoped>
</style>
